<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>百卓移动端H5管理后台</title>
    <link rel="stylesheet" th:href="@{/layui/css/layui.css}">
    <style>
        .layui-form-label{
            width: 100px;
        }
    </style>
</head>

<body class="layui-layout-body">
<div class="layui-layout layui-layout-admin">
    <div th:replace="~{index::#header}"></div>
    <div th:replace="~{index::#menu}"></div>
    <div class="layui-body">
        <!-- 内容主体区域 -->
        <div style="padding: 15px;">
            <form class="layui-form" action="">
                <div class="layui-form-item">
                    <label class="layui-form-label">模板名称</label>
                    <div class="layui-input-inline">
                        <input type="text" name="name" required lay-verify="required" placeholder="请输入" autocomplete="off" class="layui-input" style="width: 500px">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">每次点击增加</label>
                    <div class="layui-input-inline">
                        <input type="number" name="oneInc" required lay-verify="required" placeholder="请输入" value="1" autocomplete="off" class="layui-input" >
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">点击数</label>
                    <div class="layui-input-inline">
                        <input type="number" name="click" required lay-verify="required" placeholder="请输入" value="1" autocomplete="off" class="layui-input">
                    </div>
                </div>

                <div class="layui-form-item">
                    <label class="layui-form-label">背景音乐</label>
                    <div class="layui-upload">
                        <button type="button" class="layui-btn" id="bgMusic"><i class="layui-icon"></i>上传音频</button>
                        <input type="hidden" name="bgMusic" placeholder="请输入" autocomplete="off" class="layui-input">
                        <div class="layui-upload-list" style="padding-left: 125px">
                            <p id="status"></p>
                            <audio controls id="load">
                                <source src="" type="audio/mpeg" id="music_path">
                            </audio>
                        </div>
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">是否启用</label>
                    <div class="layui-input-block">
                        <input type="checkbox" checked="" name="status" lay-skin="switch" lay-filter="switchStatus" lay-text="ON|OFF">
                    </div>
                </div>
                <div class="layui-form-item">
                    <div class="layui-input-block">
                        <input type="hidden" name="id" required lay-verify="required" placeholder="请输入" th:value="${id}" autocomplete="off" class="layui-input">
                        <button class="layui-btn" lay-submit lay-filter="commit">立即提交</button>
                    </div>
                </div>
            </form>
        </div>
    </div>
</div>

<script th:src="@{/layui/layui.all.js}"></script>
<script>
    //JavaScript代码区域
    layui.use(['element', 'form'], function() {
        var upload = layui.upload;
        var element = layui.element;
        var form = layui.form;
        var layer = layui.layer;
        var $ = layui.jquery;
        remember_user = JSON.parse(sessionStorage.getItem("remember_user"))
        $('#head_pic').attr("src", remember_user.headPic)
        $('#username').html(remember_user.name)
        $('#layout').click(function () {
            layer.confirm('是否退出当前用户？', {
                btn: ['退出','取消'], //按钮
                title: "提示"
            }, function(){
                sessionStorage.removeItem("remember_user")
                window.location.href = '/login'
            });
        })

        $.ajaxSetup({
            headers: {
                Authorization:"Bearer "+ remember_user.token
            }
        });

        upload.render({
            elem: '#bgMusic'
            ,url: 'api/model/upload'
            ,accept: 'audio' //音频
            ,done: function(res){
                if(res.code != 200){
                    return layer.msg("上传失败", {icon: 5});
                }
                //上传成功
                $("#status").html('<span style="color: green;">上传成功</span>')
                $("input[name=bgMusic]").val(res.data.url)
                $("#music_path").attr("src", res.data.url)
                var fry_audio=$('#load').get('0');
                fry_audio.load();
            }
        });
        //监听提交
        form.on('submit(commit)', function(data) {
            formData = data.field;
            formData.id = parseInt(formData.id)
            formData.click = parseInt(formData.click)
            if (formData.click < 0) {
                layer.msg("点击数不能小于0!", {icon: 5});
                return false
            }
            formData.oneInc = parseInt(formData.oneInc)
            if (formData.oneInc < 1) {
                layer.msg("每次增加数不能小于1!", {icon: 5});
                return false
            }
            if (formData.bgMusic == "") {
                layer.msg("请上传背景音乐!", {icon: 5});
                return false
            }
            if (formData.status == "on") {
                formData.status = 1
            } else {
                formData.status = 2
            }
            $.ajax({
                type : "put",
                url : "/api/model/update",
                dataType: "json",
                data:JSON.stringify(formData),
                contentType: "application/json",
                success:function (rs) {
                    if (rs.code != 200) {
                        layer.msg(rs.message, {icon: 5});
                    } else {
                        layer.msg(rs.message, {icon: 6});
                    }
                }
            })
            return false;
        });
        function getQueryString(name) {
            var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i");
            var r = window.location.search.substr(1).match(reg);
            if (r != null) return unescape(r[2]); return null;
        }
        const id = $('input[name=id]').val();
        if (id) {
            remember_user = JSON.parse(sessionStorage.getItem("remember_user"))
            $.ajax({
                type : "get",
                url : "/api/model/detail",
                dataType: "json",
                data:{id: parseInt(id)},
                contentType: "application/json",
                success:function (rs) {
                    if (rs.code != 200) {
                        layer.msg(rs.message, {icon: 5});
                    } else {
                        $('input[name=id]').val(rs.data.id)
                        $('input[name=name]').val(rs.data.name)
                        $('input[name=oneInc]').val(rs.data.oneInc)
                        $("input[name=click]").val(rs.data.click)
                        $("input[name=bgMusic]").val(rs.data.bgMusic)
                        $('input[name=status]').attr("checked", rs.data.status === 1)
                        form.render();
                        $("#music_path").attr("src", rs.data.bgMusic)
                        var fry_audio=$('#load').get('0');
                        fry_audio.load();
                    }
                }
            })
        } else {
            layer.msg("地址被篡改", {icon: 5});
            window.location.href = '/modelList'
        }
    });
</script>
</body>

</html>